<template>
  <div class="home-wrapper">
     <newNav :selNum="selNum"/>
     <div class="banner">
        <img class="banner-logo" src="../assets/banner-logo.svg" alt="">
        <div class="title">
          {{$t('user.DeFiicoming')}}
        </div>
      </div>
      <div class="home-content">
        <div class="content">
            <div class="content-flex">
              <img src="../assets/icon-board.svg" alt="">
              <div class="content-title">Metaboard</div>
              <div class="content-menu">
                <div>{{$t('user.participants')}}</div>
                <div>{{metaboardObj.totalPeople}}</div>
              </div>
              <div class="content-menu">
                <div>{{$t('user.pETHtotalrelease')}}</div>
                <div>{{utils.weiOneth(metaboardObj.peth)}}</div>
              </div>
              <div class="content-menu">
                <div>{{$t('user.TvalueMetaboard')}}</div>
                <div>${{(utils.weiOneth(metaboardObj.peth)*usdtPrice).toFixed(2)}}</div>
              </div>
              <div class="content-menu">
                <div>{{$t('user.Newfortheday')}}</div>
                <div>{{metaboardObj.todayPeople}}</div>
              </div>
              <div class="content-btn" @click="jumpMetaboard(1)">Enter</div>
            </div>
            <div class="content-flex">
              <img src="../assets/icon-board.svg" alt="">
              <div class="content-title">MetaPool</div>
              <div class="content-menu">
                <div>{{$t('user.pETHstaked')}}</div>
                <div>{{utils.weiOneth(pethStakedNum).toFixed(6)}}</div>
              </div>
              <div class="content-menu">
                <div>{{$t('user.MFIuantity')}}</div>
                <div>210000</div>
              </div>
              <div class="content-menu">
                <div>{{$t('user.MFIpriceandvalue')}}</div>
                <div>0/0</div>
              </div>
              <div class="content-btn margintop70" @click="jumpMetaboard(2)">Enter</div>
            </div>
            <div class="content-flex">
              <img src="../assets/icon-board.svg" alt="">
              <div class="content-title">MetaDAO</div>
              <div class="font16">{{$t('user.UseMFIgovernance')}}</div>
              <div class="font16">{{$t('user.Holdreceiveunity')}}</div>
              <div class="font16">{{$t('user.Determinefuture')}}</div>
              <div class="content-btn margintop200 opopacity3">{{$t('user.M_home_coming_soon')}}</div>
            </div>
        </div>
        <div class="home-titleb">Metaboard</div>
        <div class="home-titles">{{$t('user.Decentralizesmart')}}</div>
        <div id="certify">
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="val in noList">
                <div class="swiper-id">
                  <div>
                    <span class="swiper-font24">ID</span>
                    <span class="swiper-font24">{{val.pk}}</span>
                  </div>
                  <div class="swiper-font20">NO.{{val.rank}}</div>
                </div>
                <div :title="$t('user.partiants')">
                  <img src="../assets/whitePerson.svg" alt="">
                  <span class="swiper-font20">{{val.offlineNum}}</span>
                </div>
                <div class="swiper-font14">{{$t('user.participantETH')}}</div>
                <div class="swiper-font36">{{utils.weiOneth(val.eth)}}</div>
                <div class="swiper-font18">≈ {{(utils.weiOneth(val.eth)*usdtPrice).toFixed(2)}}USD</div>
                <div class="swiper-font18w">
                  {{$t('user.Metaboardhighest')}}
                  <span>{{val.lastLevel}}</span>
                </div>
                <div class="swiper-font14 swiper-color5" v-if="val.adContent">{{val.adContent}}</div>
                <div class="swiper-font14 swiper-color5" v-else>{{$t('user.Welcomemetaboard')}}</div>
              </div>
            </div>
          </div>
          <div class="swiper-pagination"></div>
          <!-- <div v-if="!utils.isMobile()" class="swiper-button-prev"></div>
          <div v-if="!utils.isMobile()" class="swiper-button-next"></div> -->
        </div>
        <div  class="home-efb">
          <div class="home-efb-menu">
            <div class="home-efb-box">
              <div>
                <div>{{$t('user.participants')}}</div>
                <div>{{metaboardObj.totalPeople}}</div>
              </div>
              <div>
                <div>{{$t('user.Newfortheday')}}</div>
                <div>{{metaboardObj.todayPeople}}</div>
              </div>
              <div>
                <div>{{$t('user.pETHtotalrelease')}}</div>
                <div>{{utils.weiOneth(metaboardObj.peth)}}</div>
              </div>
              <div>
                <div>{{$t('user.TvalueMetaboard')}}</div>
                <div>$ {{(utils.weiOneth(metaboardObj.peth)*usdtPrice).toFixed(2)}}</div>
              </div>
            </div>
            <div class="home-efb-btn" @click="jumpMetaboard(1)">Enter</div>
          </div>
        </div>
        <div class="home-titleb margintop120">MetaPool</div>
        <div class="home-titles marginbot20">{{$t('user.DeFarnings')}}</div>
        <div class="home-titles marginbot20">{{$t('user.DeFiearningschoose')}}</div>
        <div class="home-titles">{{$t('user.Miningisonly')}}</div>
        <div class="home-linebox">
          <div class="paddingright">
            <img src="../assets/icon-peth.png" alt="">
          </div>
          <div>pETH {{$t('user.pETHpool')}} —> MFI</div>
          <div>
            <div>{{utils.weiOneth(stakedAllNum).toFixed(6)}}</div>
            <div>{{$t('user.Thenumberstaked')}}</div>
          </div>
          <div @click="jumpMetaboard(2)">
            <img src="../assets/home-icon-poolmore.png" alt="">
          </div>
        </div>
        <div class="home-linebox">
          <div>
            <img class="imgCh" src="../assets/icon-MFI-ETH.png" alt="">
          </div>
          <div>MFI/ETH LP{{$t('user.pETHpool')}} —>MFI</div>
          <div>
            <div>{{$t('user.M_home_coming_soon')}}</div>
            <div>APY</div>
          </div>
          <div class="opopacity3">
            <img src="../assets/home-icon-poolmore.png" alt="">
          </div>
        </div>
        <div class="home-titleb margintop120">MetaDAO</div>
        <div class="home-titles">{{$t('user.M_home_coming_soon')}}</div>
      </div>
     <div class="bottom-bai">
       <homeBottom></homeBottom>
     </div>
     <!-- <div class="bottom-area">
      Copyright © 2020,MetaPool
     </div> -->
  </div>
</template>

<script>
import newNav from '../components/newNav'
import homeBottom from '../components/public/homeBottom'
import Web3 from 'web3'
export default {
  name: 'home',
  data () {
    return {
      selNum:0,
      metaboardObj:{        
        peth: 0,
        todayPeople: 0,
        totalPeople: 0
      },
      usdtPrice:1,
      noList:[],
      pethStakedNum:0,
      stakedAllNum:0
    }
  },  
  components:{ newNav,homeBottom },
  mounted() {
    var that = this;    
    if (typeof web3 !== 'undefined') {
      web3 = new Web3(web3.currentProvider);
    } else {
        web3 = new Web3(new Web3.providers.HttpProvider(this.utils.HttpProviderIp));
    }
    that.pethStakedData();
    that.getETHusdt();
    this.metaboardData();
    this.getNo();
    this.getThenumberstakedAll();
  },
  computed: {
    lang(){
      return this.$i18n.locale
    }
  },
  methods: {
    // 获取总抵押数量
    getThenumberstakedAll() {
      const myContract = new web3.eth.Contract(this.utils.mfiAbi, this.utils.mfiAddress);
      myContract.methods.Get_Game_Info().call()
        .then(result => {
          this.stakedAllNum = result[0];
        })
    },
    //pETH质押数量
    pethStakedData(){
      const myContract = new web3.eth.Contract(this.utils.mfiAbi, this.utils.mfiAddress);
      myContract.methods.Get_Game_Info().call()
        .then(result => {
          this.pethStakedNum = result[0];
        })
    },
    //加载排名
    swipeInit(){
      var num;
      if(this.utils.isMobile){
        num = 200;
      }else{
        num = 260;
      }
      new Swiper ('.swiper-container', {
          watchSlidesProgress: true,
          slidesPerView: 'auto',
          centeredSlides: true,
          loop: true,
          loopedSlides: 5,
          autoplay: false,
          observer:false,//修改swiper自己或子元素时，自动初始化swiper 
          observeParents:false,//修改swiper的父元素时，自动初始化swiper 
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
          pagination: {
            el: '.swiper-pagination',
            clickable :true,
          },
          on: {
            progress: function(progress) {
              for (var i = 0; i < this.slides.length; i++) {
                var slide = this.slides.eq(i);
                var slideProgress = this.slides[i].progress;
                var modify = 1;
                if (Math.abs(slideProgress) > 1) {
                  modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
                }
                var translate = slideProgress * modify * num + 'px';
                var scale = 1 - Math.abs(slideProgress) / 5;
                var zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
                slide.transform('translateX(' + translate + ') scale(' + scale + ')');
                slide.css('zIndex', zIndex);
                slide.css('opacity', 1);
                if (Math.abs(slideProgress) > 3) {
                  slide.css('opacity', 0);
                }
              }
            },
            setTransition: function(transition) {
              for (var i = 0; i < this.slides.length; i++) {
                var slide = this.slides.eq(i)
                slide.transition(transition);
              }

            }
          }
      })
    },
    //排名
    getNo(){      
      var that = this;
      var time = (new Date()).valueOf();
      this.$http.get(this.utils.config+'/metapool/user/ad_rank?timestamp='+time+"&token="+this.$md5(time+'WwFEhq4hgK4yBtWmtKYMvyea95'+time)).then((res)=>{
        this.noList= res.data.data;
        for(let i=0;i<this.noList.length;i++){ 
          var contractAbi = that.utils.tranAbi;
          var contractAddress = that.utils.addressVal;  //合约地址
          var myContract = new web3.eth.Contract(contractAbi, contractAddress, {
              from: that.noList.pk, // default from address
          });
          myContract.methods.PETH_Address_To_ID(that.noList[i].pk).call(function(error, data){
            that.noList[i].pk = data;
            if(i == that.noList.length-1){
              setTimeout(()=>{
                that.swipeInit();
              },1000)
            }  
          });
        }
      })
    },
    //metaboard数据
    metaboardData(){
      var time = (new Date()).valueOf();
      this.$http.get(this.utils.config+'/metapool/user/circulation?timestamp='+time+"&token="+this.$md5(time+'WwFEhq4hgK4yBtWmtKYMvyea95'+time)).then((res)=>{
        this.metaboardObj= res.data.data;
      })
    },    
    //获取trx-usdt交易对
    getETHusdt(){
      this.$http.get(this.utils.config+'/metapool/other/eth_usdt').then((res)=>{
        this.usdtPrice = res.data.data.price;
      })
    },
    jumpMetaboard(num){
      if(num == 1){
        this.$router.push('/metaboard/login');
      }else{
        this.$router.push('/metaPool');
      }
    }
  }
}
</script>

<style scoped lang="scss">
.font16{
  text-align: left;
  margin-bottom: 20px;
  color: rgba(255,255,255,0.7);
}
@media only screen and (min-width: 0px) and (max-width: 639px){
  .margintop70{
    margin-top: 70px;
  }
  .marginbot20{
    margin-bottom: 9px!important;
  }
  .margintop200{
    margin-top: 88px;
  }
  .margintop120{
    margin-top: 62px;
  }
  .opopacity3{
    opacity: .3;
  }
  .home-wrapper {
    width: 100%;
    color: #fff;
    font-size: 16px;
    background: url('../assets/banner-bg.png') no-repeat 49% -150px;
    /* background: #000; */
    background-size: 260% 860px;
    top: 80px;
    >.banner {
      /* display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end; */
      padding-top: 160px;
      color: #fff;
      
      >.banner-logo {
        width: 220px;
      }
      >.title {
        color:#FAC200;
        font-size: 16px;
        /* letter-spacing: 20px; */
        padding-bottom: 68px;
        text-align: center;
        margin-top: 15px;
      }
      
      >.tip {
        font-size: 16px;
        color: #fff;
        opacity: .8;
        line-height: 32px;
      }
    }
    >.home-content{
      width: 100%;
      margin: 0 auto;
      background-color: rgba(0,0,0,0);
      >.content {     
        padding: 0px 40px;   
        display: flex;
        flex-wrap: wrap;
        padding-bottom: 36px;
        background-color: rgba(0,0,0,0);
        .content-flex{
          width: 360px;
          padding: 40px;
          background-color: #1E1E1E;
          border-radius: 10px;
            text-align: left;
            margin-bottom: 15px;
          >img{
            width: 42px;
            margin-bottom: 20px;
          }
          .content-title{
            font-size: 24px;
            padding-bottom: 40px;
          }
          .content-menu{
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            >div:nth-child(1){
              font-size: 14px;
              color: rgba(255, 255, 255, .7);
            }
            >div:nth-child(2){
              font-size: 18px;
            }
          }
          .content-btn{
            width: 122px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background-color: #fff;
            color: #000;
            font-size: 16px;
            border-radius: 10px;
            font-weight: bold;
          }
        }
      }
      >.home-titleb{
        font-size: 28px;
        margin-bottom: 9px;
      }
      >.home-titles{
        font-size: 14px;
        color: rgba(255, 255, 255, .6);
        margin-bottom: 40px;
      }
      >#certify{
        width: 100%;
      }
      >#certify .swiper-slide{
        width: 200px;
        height: 30%;
        background-color: rgba(21, 21, 21, 1);
        box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.6);
      }
      >#certify .swiper-pagination{
        bottom: -20px;
      }
      .swiper-container{
        width: 100%;
        .swiper-slide{
          background-color: rgba(21, 21, 21, .5);
          padding:26px 23px;
          text-align: left;
          img{
            width: 18px;
            display: inline-block!important;
            position: relative;
            top: 5px;
            margin-right: 6px;
          }
          >div:nth-child(1){
            margin-bottom: 15px;
          }
          >div:nth-child(2){
            margin-bottom: 40px;
          }
          >div:nth-child(3){
            margin-bottom: 10px;
          }
          >div:nth-child(5),>div:nth-child(6){
            margin-bottom: 20px;
          }
          .swiper-id{
            display: flex;
            justify-content: space-between;
          }
          .swiper-font20{
            font-size: 16px;
          }
          .swiper-font24{
            font-size: 18px;
            margin-left: 2px;
          }
          .swiper-font14{
            font-size: 14px;
            color: rgba(255, 255, 255, .7);
          }
          .swiper-font36{
            font-size: 36px;
            color:#F0B234;
            font-weight: bold;
          }
          .swiper-font18{
            font-size: 18px;
            color:#F0B234;
            font-weight: bold;
          }
          .swiper-font18w{
            font-size: 18px;
            color:#fff;
            font-weight: bold;
          }
          .swiper-color5{
            color: rgba(255, 255, 255, .5);
          }
        }
      }
      >.home-efb{
        width: 100%;
        position: relative;
        margin-top: 75px;
        >.home-efb-menu{
          height: 348px;
          background-color: #EFB234;
          >.home-efb-box{
            width: 100%;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            >div{
              width: 50%;
              height: 56px;
              margin-top: 60px;
              padding-right: 40px;
              >div:nth-child(1){
                font-size: 14px;
                color: rgba(0, 0, 0, 0.78);
              }
              >div:nth-child(2){
                font-size: 24px;
                color: #000;
                line-height: 42px;
              }
            }
          }
          >.home-efb-btn{
            width: 186px;
            height: 40px;
            margin: 0 auto;
            margin-top: 40px;
            line-height: 40px;
            color: #000;
            background-color: #fff;
            border-radius: 10px;
            font-size: 16px;
            font-weight: bold;
          }
        }
      }
      >.home-linebox{
        width: calc(100% - 30px);
        height: 94px;
        border-radius: 10px;
        background-color: #222222;
        padding: 22px 13px;
        margin: 0px 15px;
        display: flex;
        justify-content: space-between;
        text-align: left;
        margin-bottom: 15px;
        .paddingright{
          padding-right: 22px;
        }
        >div:nth-child(1){
          .imgCh{
            width: 56px;
            height: 33px;
          }
          img{
            width: 34px;
            height: 34px;
          }
        }
        >div:nth-child(2){
          line-height: 41px;
          padding-left: 3px;
          font-size: 12px;
        }
        >div:nth-child(3){
          padding-left: 18px;
          font-size: 16px;
          line-height: 29px;
          >div:nth-child(1){
            font-size: 14px;
          }
          >div:nth-child(2){
            font-size: 12px;
            color: rgba(255, 255, 255, .5);
            line-height: 14px;
          }
        }
        >div:nth-child(4){
          width: 30px;
          height: 30px;
          margin-top: 7px;
          line-height: 38px;
          background-color: #EFB234;
          text-align: center;
          border-radius: 10px;
          img{
            width: 9px;
            position: relative;
            top: 10px;
          }
        }
      }
    }
    >.bottom-area {
      padding-bottom:80px;
      font-size: 16px;
      opacity: .6;
    }
    .bottom-bai{
      width: 100%;
      margin: 0 auto;
      padding-top:80px;
      padding-bottom: 20px;
    }
  }
 
}


@media only screen and (min-width: 640px) {
  .margintop70{
    margin-top: 70px;
  }
  .marginbot20{
    margin-bottom: 20px!important;
  }
  .margintop200{
    margin-top: 88px;
  }
  .margintop120{
    margin-top: 120px;
  }
  .opopacity3{
    opacity: .3;
  }
  .home-wrapper {
    width: 100%;
    color: #fff;
    font-size: 16px;
    background: url('../assets/banner-bg.png') no-repeat;
    /* background: #000; */
    background-size: 100% 860px;
    top: 80px;
    >.banner {
      /* display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end; */
      padding: 143px 24% 82px;
      color: #fff;
      
      >.banner-logo {
        width: 336px;
      }
      >.title {
        color:#FAC200;
        font-size: 24px;
        letter-spacing: 6px;
        padding-bottom: 68px;
      }
      
      >.tip {
        font-size: 16px;
        color: #fff;
        opacity: .8;
        line-height: 32px;
      }
    }
    >.home-content{
      width: 1200px;
      margin: 0 auto;
      background-color: rgba(0,0,0,0);
      >.content {
        display: flex;
        justify-content: space-between;
        padding-bottom: 157px;
        background-color: rgba(0,0,0,0);
        .content-flex{
          width: 360px;
          padding: 40px;
          background-color: #1E1E1E;
          border-radius: 10px;
          >img{
            width: 50px;
            margin-bottom: 26px;
          }
          .content-title{
            font-size: 36px;
            padding-bottom: 40px;
            text-align: left;
          }
          .content-menu{
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            >div:nth-child(1){
              font-size: 14px;
              color: rgba(255, 255, 255, .7);
            }
            >div:nth-child(2){
              font-size: 20px;
            }
          }
          .content-btn{
            width: 122px;
            height: 40px;
            line-height: 40px;
            background-color: #fff;
            color: #000;
            font-size: 16px;
            border-radius: 10px;
            cursor: pointer;
          }
        }
      }
      >.home-titleb{
        font-size: 50px;
        margin-bottom: 27px;
      }
      >.home-titles{
        font-size: 20px;
        color: rgba(255, 255, 255, .7);
        margin-bottom: 73px;
      }
      >#certify .swiper-slide{
        height: 460px;
        background-color: rgba(21, 21, 21, 1);
        box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.6);
      }
      >#certify .swiper-pagination{
        bottom: -20px;
      }
      .swiper-container{
        width: 100%;
        .swiper-slide{
          background-color: rgba(21, 21, 21, .5);
          padding:41px 38px;
          text-align: left;
          img{
            width: 22px;
            display: inline-block!important;
            position: relative;
            top: 6px;
            margin-right: 6px;
          }
          >div:nth-child(1){
            margin-bottom: 15px;
          }
          >div:nth-child(2){
            margin-bottom: 40px;
          }
          >div:nth-child(3){
            margin-bottom: 10px;
          }
          >div:nth-child(5),>div:nth-child(6){
            margin-bottom: 20px;
          }
          .swiper-id{
            display: flex;
            justify-content: space-between;
          }
          .swiper-font20{
            font-size: 20px;
          }
          .swiper-font24{
            font-size: 24px;
            margin-left: 2px;
          }
          .swiper-font14{
            font-size: 14px;
            color: rgba(255, 255, 255, .7);
          }          
          .swiper-font36{
            font-size: 36px;
            color:#F0B234;
            font-weight: bold;
          }
          .swiper-font18{
            font-size: 18px;
            color:#F0B234;
            font-weight: bold;
          }
          .swiper-font18w{
            font-size: 18px;
            color:#fff;
            font-weight: bold;
          }
          .swiper-color5{
            color: rgba(255, 255, 255, .5);
          }
        }
      }
      >.home-efb{
        width: 100%;
        height: 248px;
        position: relative;
        margin-top: 75px;
        >.home-efb-menu{
          width: 200%;
          height: 248px;
          position: absolute;
          top: 0px;
          left: -50%;
          background-color: #EFB234;
          >.home-efb-box{
            width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            >div{
              height: 56px;
              margin-top: 60px;
              padding-right: 40px;
              border-right: 1px solid rgba(0, 0, 0, .3);
              >div:nth-child(1){
                font-size: 14px;
                color: rgba(0, 0, 0, 0.78);
              }
              >div:nth-child(2){
                font-size: 36px;
                color: #000;
                line-height: 42px;
              }
            }
          }
          >.home-efb-btn{
            width: 186px;
            height: 40px;
            margin: 0 auto;
            margin-top: 40px;
            line-height: 40px;
            color: #000;
            background-color: #fff;
            border-radius: 10px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
          }
        }
      }
      >.home-linebox{
        width: 100%;
        height: 94px;
        border-radius: 10px;
        background-color: #222222;
        padding: 22px 54px;
        display: flex;
        justify-content: space-between;
        text-align: left;
        margin-bottom: 15px;
        .paddingright{
          padding-right: 44px;
        }
        >div:nth-child(1){
          .imgCh{
            width: 89px;
            height: 51px;
          }
          img{
            width: 46px;
            height: 46px;
          }
        }
        >div:nth-child(2){
          width: 317px;
          line-height: 41px;
          padding-left: 18px;
          font-size: 16px;
        }
        >div:nth-child(3){
          width: 686px;
          padding-left: 18px;
          font-size: 16px;
          line-height: 29px;
          >div:nth-child(1){
            font-size: 24px;
          }
          >div:nth-child(2){
            font-size: 14px;
            color: rgba(255, 255, 255, .5);
          }
        }
        >div:nth-child(4){
          width: 115px;
          height: 38px;
          margin-top: 7px;
          line-height: 38px;
          background-color: #EFB234;
          border-radius: 10px;
          text-align: center;
          cursor: pointer;
          img{
            width: 15px;
            position: relative;
            top: 12px;
          }
        }
      }
    }
    >.bottom-area {
      padding-bottom:80px;
      font-size: 16px;
      opacity: .6;
    }
    .bottom-bai{
      width: 1200px;
      margin: 0 auto;
      padding-top:80px;
      padding-bottom: 20px;
    }
  }
}

</style>
